<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZSXQ AI Explainer</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <div class="header">
      <h2>ZSXQ AI Explainer</h2>
      <button class="close-btn">&times;</button>
    </div>
    
    <div class="tab-container">
      <div class="tab-buttons">
        <button class="tab-btn active" data-tab="model">模型配置</button>
        <button class="tab-btn" data-tab="prompt">提示词设置</button>
        <button class="tab-btn" data-tab="logseqConfig">笔记同步</button>
      </div>

      <div class="tab-content">
        <!-- 模型配置 Tab -->
        <div class="tab-pane active" id="model">
          <div id="deepseekConfig">
            <label for="apiKey">DeepSeek API Key:</label>
            <input id="apiKey" placeholder="输入 DeepSeek API Key">
          </div>
          
          <div id="openaiConfig">
            <label for="openaiKey">OpenAI API Key:</label>
            <input id="openaiKey" placeholder="输入 OpenAI API Key">
            <label for="openaiBaseUrl">OpenAI Base URL (可选):</label>
            <input id="openaiBaseUrl" placeholder="自定义 OpenAI API 地址">
          </div>

          <div id="modelSelection">
            <label for="modelSelector">选择模型:</label>
            <select id="modelSelector" class="model-selector">
              <option value="">请先同步模型</option>
            </select>
          </div>

          <button id="syncModels" class="sync-btn">同步可用模型</button>
        </div>

        <!-- 提示词设置 Tab -->
        <div class="tab-pane" id="prompt">
          <label for="systemPrompt">提示词 (Prompt):</label>
          <textarea id="systemPrompt" rows="12" placeholder="输入自定义提示词"></textarea>
          <button id="resetPrompt">重置默认提示词</button>
        </div>

        <div class="tab-pane" id="logseqConfig">
          <label for="logseqToken">Logseq Token:</label>
          <input id="logseqToken" placeholder="输入 Logseq Token">
          <label for="logseqGraphPath">Logseq Graph:</label>
          <div class="folder-select">
            <input id="logseqGraphPath" readonly disabled placeholder="请安装先设置 Logseq">
            <button id="connectLogseq" type="button" class="folder-btn">连接 Logseq</button>
          </div>
          <div class="tips">
            <p>📝 Logseq 同步设置说明：</p>
            <ol>
              <li>开启"开发者模式" 设置>高级设置>开发者模式</li>
              <li>开启"HTTP APIs server" 更多功能>HTTP APIs server</li>
              <li>重启 Logseq 以使设置生效</li>
              <li>Logseq 右上角 API 功能设置 Token</li>
              <li>Start server</li>
              <li>本界面填入配置的 Token 点击"连接 Logseq"</li>
            </ol>
            <p class="tip-link">详细说明请参考：<a href="https://docs.logseq.com/#/page/local%20http%20server" target="_blank">Logseq HTTP Server 文档</a></p>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <button id="saveConfig">保存配置</button>
      <p class="hint">内容区域右键点击"解释内容"来使用。</p>
    </div>
  </div>
  <script src="../utils/constants.js"></script>
  <script src="../utils/api.js"></script>
  <script src="popup.js"></script>
</body>
</html>

